import React, { useCallback, useContext } from 'react';
import classes from './index.module.css';
import { useNavigate } from 'react-router-dom';
import BlockButton from '@/components/BlockButton';
import { AppContext } from '@/store/index.context';

export default function Home() {
  const navigate = useNavigate();
  const { gameStore, historyGamesStore } = useContext(AppContext);
  const { isHistoryGame, clearGame, setGame } = gameStore;
  const { currentTemGame, setCurrentTemGame } = historyGamesStore;

  const handleStartOne = useCallback(() => {
    if (isHistoryGame) {
      clearGame();
    }
    if (currentTemGame) {
      setGame(currentTemGame);
      setCurrentTemGame(undefined);
    }
    navigate('/start-one');
  }, [
    isHistoryGame,
    clearGame,
    currentTemGame,
    setGame,
    navigate,
    setCurrentTemGame,
  ]);

  return (
    <div className={classes.Home}>
      <header className={classes.HomeHeader}>
        <h1 className={classes.BigHeader}>立直(日本)麻将</h1>
        <small className={classes.SmallHeader}>牌局记录</small>
      </header>

      <div className={classes.Buttons}>
        <BlockButton onClick={handleStartOne} text="开启一场对局" />
        <BlockButton onClick={() => navigate('/history')} text="历史对局查看" />
        <BlockButton onClick={() => navigate('/athletes')} text="人员管理" />
        <BlockButton onClick={() => navigate('/rules')} text="规则" />
      </div>
    </div>
  );
}
